<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <!--
        vue不推荐操作dom，在处理事件方面给我们提供了事件修饰符
        来控制事件的传播行为和默认行为等
        - .stop       阻止冒泡
        - .prevent    阻止默认事件
        - .capture    添加事件侦听器时使用事件捕获模式
        - .self       只当事件在该元素本身（比如不是子元素）触发时触发回调
        - .once       事件只触发一次

    -->
    <div style="width: 300px;height: 400px;background-color: aqua" @click="showMsg('最外边的事件被触发了,当前阶段:'+$event.eventPhase)">
        <div style="width: 100px;height: 150px;background-color: red" @click="showMsg('红色div被触发了，没有使用任何修饰符！')">
        </div>
        <div style="width: 100px;height: 150px;background-color:yellow" @click.stop="showMsg('黄色div被触发了，使用了stop！')">
        </div>
        <a href="http://www.baidu.com" @click="showMsg('a标签被点击了，没用修饰符！')">点我测试A标签</a>
        <br>
        <a href="http://www.baidu.com" @click.prevent="showMsg('a标签被点击了，使用了prevent！')">点我测试阻止默认行为</a>
        <br>
        <a href="http://www.baidu.com" @click.prevent.stop="showMsg('a标签被点击了，使用了stop.prevent！')">点我测试阻止默认行为和事件传播</a>
    </div>

    <div style="width: 300px;height: 400px;background-color: blue" @click.self="showMsg('最外边的事件被触发了,当前阶段:'+$event.eventPhase)">
        <div style="width: 100px;height: 150px;background-color:yellow" @click.capture="showMsg('黄色div被触发了，没用stop，会传播！')">

        </div>
        <div style="width: 100px;height: 150px;background-color:red" @click.once="showMsg('我只会触发一次！')">

        </div>

    </div>

</div>

</p>
<script src="lib/vue.js"></script>
<script>
    let app = new Vue({
        el: '#app',
        data: {
            msg: 'test',
        },
        methods: {
            showMsg(msg){
                alert(msg);
            }
        }
    })
</script>
</body>
</html>